<template>
  <div class='cars first-box'>
    <Form :formData="getListData" :formParam="formParam"></Form>
    <Btn class="margin40" :buttonData="buttonData"></Btn>
    <input style="display:none" id="camera" ref="camera" type="file" accept="image/*" capture="camera" @change="choosePic">
    <!-- <img :src="testUrl" alt=""> -->
  </div>
</template>
<script>
import Form from "../../common/form";
import Btn from "../../common/button.vue"
import {serveType} from '../../../../static/data/selectdata.js'
export default {
  components: {Form,Btn},
  name: "",
  data() {
    return {
      formParam:{
        plateNum:"",//车牌号
        frameNum:"",//车架号
        userName:"",
        sex:"",
        phone:"",
        type:"1",
        mileage:"",
        oilMeter:"",
        remark:"",
        extractions:"",
        detectionerId:"",
        isWaiting:false,//true表示在店等，false 否
        testerId:"",
        drawerId:"",
        checkerId:"",
        reportDone:"",//是否完成报告---string
      },
      camerakey:"",
      buttonData:[
        {
          label:"保存",
          click:this.save,
        }
      ],
      testUrl:"",
      
      memberData:[],

      list0:[
        {type:"input",label:"车牌号",key:"plateNum",camera:true,textClick:this.openCamera,isNeed:true},
        {type:"input",label:"车架号",key:"frameNum",camera:true,textClick:this.openCamera,isNeed:true},
        {type:"input",label:"客户名称",key:"userName",},
        {type:"select",label:"性别",key:"sex",array:[{value:"男",key:"1"},{value:"女",key:"0"}],isNeed:true},
        {type:"number",label:"电话号码",key:"phone",},
        {type:"select",label:"服务类型",key:"type",array:serveType,isNeed:true},
        // {type:"input",label:"保养类型",key:"",},
        {type:"number",label:"进店里程",key:"mileage",unit:"公里"},
        {type:"number",label:"进店油表",key:"oilMeter",},
        {type:"input",label:"车主备注",key:"remark",placeholder:"请输入车主嘱咐",text:"常用嘱咐",textClick:this.usualWord},
        {type:"date",label:"交车时间",key:"extractions",},
        {type:"switch",label:"在店等",key:"isWaiting",isNeed:true},
        {type:"select",label:"保养人",key:"testerId",isNeed:true,array:[]},
        {type:"select",label:"开单人",key:"drawerId",isNeed:true,array:[]},
        {type:"select",label:"验车人",key:"checkerId",isNeed:true,array:[]},
        // {type:"number",label:"下次提醒天数",key:"",},
      ],
      list1:[
        {type:"input",label:"车牌号",key:"plateNum",camera:true,textClick:this.openCamera,isNeed:true},
        {type:"input",label:"车架号",key:"frameNum",camera:true,textClick:this.openCamera,isNeed:true},
        {type:"input",label:"客户名称",key:"userName",},
        {type:"select",label:"性别",key:"sex",array:[{value:"男",key:"1"},{value:"女",key:"0"}],isNeed:true},
        {type:"number",label:"电话号码",key:"phone",},
        {type:"select",label:"服务类型",key:"type",array:serveType,isNeed:true},
        {type:"input",label:"检修人",key:"detectionerId",placeholder:"请输入检修人姓名",isNeed:true},
        {type:"number",label:"进店里程",key:"mileage",unit:"公里"},
        {type:"number",label:"进店油表",key:"oilMeter",},
        {type:"input",label:"车主备注",key:"remark",placeholder:"请输入车主嘱咐",text:"常用嘱咐",textClick:this.usualWord},
        {type:"date",label:"交车时间",key:"extractions",},
        {type:"switch",label:"在店等",key:"isWaiting",isNeed:true},
        {type:"select",label:"保养人",key:"testerId",isNeed:true,array:[]},
        {type:"select",label:"开单人",key:"drawerId",isNeed:true,array:[]},
        {type:"select",label:"验车人",key:"checkerId",isNeed:true,array:[]},
        {type:"input",label:"检测报告",key:"reportDone",placeholder:"暂未填写检修报告",text:"检测报告",textClick:this.repaire,readonly:true},
      ]
    };
  },
  computed:{
    getListData(){
      return [
        {
          title:{
            show:false
          },
          children:this.formParam.type==1?this.list0:this.list1
        }
      ]
    }
  },
  watch: {
	'$route' (to, from) {
      if(from.path=="/works"&&to.path=="/works/cars"){
        // 不缓存
        this.formParam={
          plateNum:"",//车牌号
          frameNum:"",//车架号
          userName:"",
          sex:"",
          phone:"",
          type:"1",
          mileage:"",
          oilMeter:"",
          remark:"",
          extractions:"",
          detectionerId:"",
          isWaiting:false,//true表示在店等，false 否
          testerId:"",
          drawerId:"",
          checkerId:"",
          detectionId:"", //配置id
          reportDone:"",//是否完成报告---string
        }
        this.$set(this.formParam,"reportDone","暂未填写检修报告")
        sessionStorage.setItem("reportDoneId",null)
      }else if(to.path=="/works/cars"&&from.path.indexOf("/works/cars/report")>-1){
        // 缓存
        this.$set(this.formParam,"reportDone",sessionStorage.getItem("reportDoneId")?"已填写检修报告":"暂未填写检修报告")
      }
    }
  },

  methods: {
    // 常用嘱咐
    usualWord(item){
      this.$store.state.dialogs.alert.content=item.text + " 升级中"
      this.$store.state.dialogs.alert.show=true
    },

    repaire(){
      if(!this.formParam.checkerId){
        _g.toMessage({status:1,msg:"没有选择验车人"})
        return
      }

      this.$router.push("/works/cars/report/"+this.formParam.checkerId)
    },

    save(){
      var goal = this.formParam.type==1?this.list0:this.list1
      for(var i=0;i<goal.length;i++){
        if(goal[i].isNeed&&!this.formParam[goal[i].key]&&this.formParam[goal[i].key]!==false){
          _g.toMessage({status:1,msg:`${goal[i].label}为空`})
          return
        }
      }
      var params=JSON.parse(JSON.stringify(this.formParam))
      params.isWaiting=params.isWaiting?1:0
      delete params.reportDone
      params.detectionId=sessionStorage.getItem("reportDoneId")
      
      // console.log(params)
      // return
      _g.apiPost("pickUp/save.do",params).then(res=>{
        _g.toMessage(res)
        if(res.status){
          this.$router.go(-1)
        }
      })
    },

    // 打开照相机
    openCamera(item){
      this.camerakey=item.key
      this.$refs.camera.click()
    },
    choosePic(val){
      var that=this
      _store.state.dialogs.loading.show=true
      var file =val.target.files[0]
      //创建读取文件的对象
      var reader = new FileReader();
      //创建文件读取相关的变量
      var imgFile;

      //为文件读取成功设置事件
      reader.onload=function(e) {
          imgFile = e.target.result;
          var result={
            general:that.camerakey=="frameNum",//是否使用的通用文字识别
          }
          var img=new Image()
          var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');
          img.src=imgFile
          
          img.onload=function(){
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            // 最大尺寸限制
            var maxWidth = 200, maxHeight = 200;
            // 目标尺寸
            var targetWidth = originWidth
            var targetHeight = originHeight;
            // 图片尺寸超过400x400的限制
            if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            // canvas对图片进行缩放
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight);
             
            // 处理手机拍照旋转的bug
            var orient = _g.getPhotoOrientation(img);
            // alert(orient)
             if (orient == 6) {
                context.save();//保存状态
                context.translate(targetWidth / 2, targetHeight / 2);//设置画布上的(0,0)位置，也就是旋转的中心点
                context.rotate(90 * Math.PI / 180);//把画布旋转90度
                // 执行Canvas的drawImage语句
                context.drawImage(img,  - targetHeight / 2, - targetWidth / 2, targetHeight, targetWidth);//把图片绘制在画布translate之前的中心点，
                context.restore();//恢复状态
            } else {
                // 执行Canvas的drawImage语句
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
            }
            
            // 图片压缩
            // context.drawImage(img, 0, 0, targetWidth, targetHeight);
            var final= canvas.toDataURL("image/jpeg")

            getWords(final,result).then(res=>{
              var settime= setInterval(()=>{
                if(result.number){
                  clearInterval(settime)
                  if(that.camerakey)that.$set(that.formParam,that.camerakey,result.number)
                }
              },1000)
            })
          }
          
          
      };
      //正式读取文件
      reader.readAsDataURL(file);
    },

    getSelectData(){
      _g.apiPost("purchaseOrder/getEmployeeDrop.do").then(res=>{
        var goal=[]
        res.data.forEach(ele => {
          goal.push({
            key:ele.value,
            value:ele.label
          })
        });
        this.$set(this.list0[11],"array",goal)
        this.$set(this.list0[12],"array",goal)
        this.$set(this.list0[13],"array",goal)

        this.$set(this.list1[12],"array",goal)
        this.$set(this.list1[13],"array",goal)
        this.$set(this.list1[14],"array",goal)
      })
    }
  },
  created() {
    this.$set(this.formParam,"reportDone",sessionStorage.getItem("reportDoneId")?"已填写检修报告":"暂未填写检修报告")
    this.getSelectData()
  },
  mounted(){
    
  }
};
</script>
<style lang="scss" scoped>
.cars {
  .margin40 {
    margin: 40px 30px;
  }
}
</style>